<template>
    <div class="incoor">
        <div class="navbox">
            <el-row>
                <el-col :span="24">
                    <div class="homeNav">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/Outcoor' }">合作</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{path:'/incoor'}">国内合作</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="incoorContent">
            <el-row :gutter="20">
                <el-col :span="16">
                  <div class="chart">
                    <el-tabs type="border-card">
                        <el-tab-pane label="全国合作医院饼图展示">
                          <!--饼状图-->
                              <div id="main" style="width:800px;height:500px;"></div>
                        </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-col>
                <el-col :span="8">
                    <div class="home_right">
                        <div class="homeList">
                          <ul>
                            <li>
                                <router-link to="/culture"><span class="sLeft">德国合作</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                            <li>
                                <router-link to="/culture"><span class="sLeft">国内合作</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                            <li>
                                <router-link to="/culture"><span class="sLeft">合作伙伴</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                              <li>
                                <router-link to="/culture"><span class="sLeft">调研交流</span><span class="sright">>></span></router-link>
                            </li>
                        </ul>
                        </div>
                        <div class="homeConnect">
                            <p class="connect_h">联系我们</p>
                            <el-divider></el-divider>
                            <p>电话：86-10-68005755,86-10-68006083</p>
                            <p>E-mail:xmbj2005@163.com</p>
                            <p>邮箱:492800904@qq.com</p>
                            <p>地址：北京市西城区西直门外大街18号金贸大厦A座935</p>
                            <P>
                                <img src="../assets/code.jpg"
                                     alt="" />
                            </P>
                        </div>
                    </div>
                </el-col>
                <!-- 联系方式结束 -->
            </el-row>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    name:"incoor",
    data () {
            return {
                charts: '',
                opinion:['北京市','云南省','江西省','广东省','河北省','四川省','海南省','山西省','陕西省','辽宁省'],
                  type: 'pie',
                  opinionData:[
                      {value:7,name:'北京市'},
                      {value:5,name:'云南省'},
                      {value:2,name:'江西省'},
                      {value:4,name:'广东省'},
                      {value:2,name:'河北省'},
                      {value:1,name:'四川省'},
                      {value:1,name:'海南省'},
                      {value:2,name:'山西省'},
                      {value:3,name:'陕西省'},
                      {value:2,name:'辽宁省'},
                  ],
            }
    },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    backgroundColor: '#fff',
                    color: ['#c13831', '#2f4553','#61a0a9','#d7f0e3','#3297db','#2f4553','#75e57c','#d9d98b','#e09370','#ce8520'],/*饼状图的颜色*/
                    tooltip : {
                        trigger: 'item',
                        formatter: "{b}({d}%)",/*饼状图触碰之后显示的注释文字*/
                    },
                    legend: {
                        left: 'center',/*标签文字排成一行*/
                        y: 'bottom',/*在垂直方向上的底部*/
                        data:this.opinion,
                    },
                    series: [
                        {
                            type: 'pie',   //饼状图
                            center: ['50%', '50%'],    //显示位置
                            name:'',
                            type:'pie',
                            radius:['0%','60%'],/*空心圆的占比*/
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    borderWidth: 5,/*隔开的白色边界*/
                                    borderColor: '#fff',/*border*/
                                    // labelLine :{show:true}
                                },
                            },
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                        show:true,
                                        // position:'inner',
                                        textStyle: {
                                            fontWeight: 200,
                                            fontSize: 20   //文字的字体大小
                                        },
                                    // formatter: '{d}%',/*饼状图内显示百分比*/
                                    // data:['40%','60%'],
                                },

                                emphasis: {
                                    show: false,/*空心文字出现*/
                                }
                            },
                            labelLine: {
                              normal: {
                                 lineStyle: {
                                     color: '#000'
                                 }
                              }
                            },
                            data:this.opinionData
                        }
                    ]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        },
};
</script>
<style lang="less">
* {
    padding: 0;
    margin: 0;
}
.incoor {
    width: 100%;
    .navbox {
        .el-row {
            .el-col {
                .homeNav {
                    width: 100%;
                    margin: 3.125rem /* 50/16 */;
                }
            }
        }
    }
    .incoorContent {
      margin-left:3.125rem /* 50/16 */;
        .el-row {
            .el-col {
              .charts{
                .el-
                #main{
                  width:300px;
                  height:300px;
                  background-color:#0a77a0;
                }
              }
            }
            .el-col {
                .home_right {
                    width: 100%;
                    margin-left: 3.125rem /* 50/16 */;
                    .homeList {
                        text-align: center;
                        margin-bottom: 1.875rem /* 30/16 */;
                        ul {
                            background-color: #0a77a0;
                            width: 50%;
                            text-align: left;
                            li {
                                list-style: none;
                                height: 1.875rem /* 30/16 */;
                                line-height: 1.875rem /* 30/16 */;
                                padding: 0.9375rem /* 15/16 */;
                                a {
                                    text-decoration: none;
                                    color: #fff;
                                    .sLeft {
                                        float: left;
                                    }
                                    .sright {
                                        float: right;
                                    }
                                }
                            }
                        }
                    }
                    .homeConnect {
                        width: 80%;
                        .connect_h {
                            color: #0a77a0;
                        }
                        p {
                            line-height: 1.875rem /* 30/16 */;
                        }
                    }
                }
            }
        }
    }
}
</style>
